<template>
  <div>
     <el-container>
      <el-header>
        {{tit}}
      </el-header>
      <el-main style="height:100%;width:80%;margin: 0 auto;">
        <el-row :gutter="15">
          <el-form ref="quality" :model="qualityData" :rules="rules" size="medium" label-width="100px"
            label-position="left">
            <el-col :span="13">
              <el-form-item label="规则名称" prop="name">
                <el-input v-model="qualityData.name" placeholder="请输入规则名称" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="规则类型" prop="conditionType">
                <el-select v-model="qualityData.conditionType" @change="selectChange" placeholder="请选择规则类型" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="规则说明" prop="description">
                <el-input v-model="qualityData.description" type="textarea" placeholder="请输入规则说明"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item :label="expLabel" prop="conditionExp">
                <el-input v-model="qualityData.conditionExp" :placeholder="expPl" clearable
                  :style="{width: '100%'}"></el-input>
                <div v-if="ziduanzhi" style="float:left;color:blue" @click="appendChart">字段值</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item size="large">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="resetForm">取消</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
    </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      tit:"新建质量规则",
      ziduanzhi:false,
      expLabel:'正则表达式',
      expPl:'请输入正则表达式',
      quality:this.$route.params.quality,
      qualityData: {
        id:"",
        name: "",
        conditionType: 1,
        description: "",
        conditionExp: "",
      },
      rules: {
        name: [{
          required: true,
          message: '请输入规则名称',
          trigger: 'blur'
        }],
        conditionType: [{
          required: true,
          message: '请选择规则类型',
          trigger: 'change'
        }],
        description: [{
          required: true,
          message: '请输入规则说明',
          trigger: 'blur'
        }],
        conditionExp: [{
          required: true,
          message: '该项为必填项',
          trigger: 'blur'
        }],
      },
      typeOptions: [{
        "label": "模式匹配",
        "value": 1
      }, {
        "label": "值域",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if(this.quality){
      this.tit = "编辑质量规则";
      this.qualityData = this.quality;
    }else{
      this.tit = "新建质量规则";
    }
  },
  methods: {
    submitForm() {
      let _this = this;
      this.$refs['quality'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        debugger;
        if(_this.qualityData.id){
          _this.qualityData.name = _this.$refs['quality'].model.name,
          _this.qualityData.conditionType = _this.$refs['quality'].model.conditionType,
          _this.qualityData.description = _this.$refs['quality'].model.description,
          _this.qualityData.conditionExp = _this.$refs['quality'].model.conditionExp,
          _this.axios
          .post(this.HOST + "/update", {
            id:_this.qualityData.id,
            name: _this.$refs['quality'].model.name,
            conditionType: _this.$refs['quality'].model.conditionType,
            description: _this.$refs['quality'].model.description,
            conditionExp:_this.$refs['quality'].model.conditionExp
          })
          .then(function(res) {
            debugger;
            if(res.data){
              _this.$router.push("/");
            }
          })
          .catch(function(err) {
            console.log(err);
          });
        }else{
          _this.axios
          .post(this.HOST + "/add", {
            name: _this.$refs['quality'].model.name,
            conditionType: _this.$refs['quality'].model.conditionType,
            description: _this.$refs['quality'].model.description,
            conditionExp:_this.$refs['quality'].model.conditionExp
          })
          .then(function(res) {
            debugger;
            if(res.data){
              _this.$router.push("/");
            }
          })
          .catch(function(err) {
            console.log(err);
          });
        }
      })
    },
    resetForm() {
      this.$router.push("/");
    },
    selectChange(value,a,b){
      if(value ==1){
        this.ziduanzhi=false;
        this.expLabel='正则表达式';
        this.expPl='请输入正则表达式';
      }else{
        this.ziduanzhi=true;
        this.expLabel='值域范围';
        this.expPl='请输入值域判断条件';
      }
    },
    appendChart(){
      this.qualityData.conditionExp +="$(#)"
    }
  }
}

</script>
<style>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
</style>
